<template>
  <div id="app">
    <div>根组件</div>
    <router-link to="/home" tag="li" active-class="hehe"> 首页 </router-link>
    <router-link to="/my" tag="li" active-class="hehe"> 我的 </router-link>
    <router-link to="/detail?us=123&ps=456" tag="li" active-class="hehe">
      详情
    </router-link>
    <button @click="jump">编程详情-query</button>
    <hr />
    <button @click="order">编程订单-params</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    order() {
      // params name 传参
      // this.$router.push({ name: "order", params: { us: 123, ps: 123 } });
      //  params 传参不能和path 直接一块用 因为动态导航
      // this.$router.push({ path: "/order", params: { us: 123, ps: 123 } });
    },
    jump() {
      // const us = 123;
      // const ps = 123;
      // this.$router.push(`/detail?$us=${us}&ps=${ps}`);
      // this.$router.push({
      //   path: `/detail?us=${us}&ps=${ps}`,
      // });
      // this.$router.push({
      //   path: "/detail",
      //   query: { us, ps },
      // });
      // this.$router.push({ name: "hehe", query: { us, ps } });
      // this.$router.push("hehe"); hehe 是 "/hehe" 的简写
      this.$router.push("/detail");
    },
  },
};
</script>

<style>
.hehe {
  background: red;
}
</style>
